// 1、导入index.vue=====》Message组件
// 2、封装并导出Message函数
// message({type:'',text:''})等价于动态创建Message组件，实现弹框提示的效果
// 思路：
// 1、用createVNode将导入的Message组件生成vnode
// 2、用render将vnode渲染到真实的dom
// 3、把真实的dom添加到页面上

import XtxMessage from './index.vue'
import { createVNode, render } from 'vue'
export function Message({ type, text }) {
  // 1、用createVNode将导入的Message组件生成vnode
  // createVNode(XtxMessage,XtxMessage组件的props)
  const vnode = createVNode(XtxMessage, { type, text })
  // 2、用render将vnode渲染到真实的dom
  const div = document.createElement('div') // 空的dom容器
  render(vnode, div) // XtxMessage对的dom填充到div
  console.log(div)

  // 3、把真实的dom添加到页面上
  document.body.appendChild(div)

  // 4、显示1500ms之后，消失
  setTimeout(() => {
    render(null, div)
  }, 1500)
}
